<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文字标注</title>
    <link rel="stylesheet" href="../v6.4.3/css/ol.css">
  </head>
  <body>
    <div id="map" style="height: 500px;"></div>
    
    <script src="../v6.4.3/build/ol.js"></script>
    <script>
      //地图图层
      const mapLayer = new ol.layer.Tile({
        source: new ol.source.Stamen({
          layer: 'terrain'
        })
      })
      //标注样式
      const labelStyle = new ol.style.Style({
        image: new ol.style.Icon({
          src: 'image/beijing.jpg',
          scale: 0.05
        })
      })
      const vectorSource = new ol.source.Vector()
      const vectorLayer = new ol.layer.Vector({
        source: vectorSource
      })

      //用于充当标注的要素
      let labelFeature = new ol.Feature({
        geometry: new ol.geom.Point([12956325, 4851028])
      })
      labelFeature.setStyle(labelStyle)
      vectorSource.addFeature(labelFeature)

      const map = new ol.Map({
        target: 'map',
        layers: [mapLayer, vectorLayer],
        view: new ol.View({
          projection: 'EPSG:3857',
          center: [0, 0],
          zoom: 0
        })
      })

    </script>
  </body>
</html>
